<template>
    <div>
        <div class="case-desc">
            <p>圆环图同样可以用来表示数据占总体的比例，相比于饼图，它中间空余的部分可以用来显示一些额外的文字等信息，因而也是一种常用的图表类型。</p>
            <p>在 ECharts 中，饼图的半径除了上一小节提到的，可以是一个数值或者字符串之外，还可以是一个包含两个元素的数组，每个元素可以为数值或字符串。当它是一个数组时，它的前一项表示内半径，后一项表示外半径，这样就形成了一个圆环图。</p>
            <p>在圆环图中间显示高亮扇形对应的文字：实现这一效果的思路是，利用系列的 label（默认用扇形颜色显示数据的 name），显示在圆环图中间。在默认情况下不显示系列的 label，在高亮时显示。</p>
        </div>
        <div class="case-code-container">
            <div id="pie-case-4" class="chart-container">

            </div>
            <highlightjs class="code" lang="js" :code="code"></highlightjs>
        </div>
    </div>
</template>

<script setup>
    import { code } from './code/case4.js';
    import * as echarts from 'echarts';
    import { onMounted } from 'vue';
    onMounted(() => {
        // 基于准备好的dom，初始化echarts实例
        const dom = document.getElementById('pie-case-4');
        const myChart = echarts.init(dom, 'dark', { renderer: 'svg' });

        // 绘制图表
        /** @type {echarts.EChartsOption} */
        const option = {
            title: { text: '基础圆环图' },
            tooltip: {},
            // 不再需要配置坐标轴
            series: [
                {
                    name: '进入来源',
                    type: 'pie',
                    // ★★★饼图的半径除了上一小节提到的，可以是一个数值或者字符串之外，还可以是一个包含两个元素的数组，每个元素可以为数值或字符串
                    radius: [50, 70],
                    data: [
                        {
                            value: 335,
                            name: '直接访问',
                        },
                        {
                            value: 234,
                            name: '联盟广告',
                        },
                        {
                            value: 1548,
                            name: '搜索引擎',
                        },
                    ],
                    // ★★★在圆环图中间显示高亮扇形对应的文字
                    // 默认不显示
                    label: {
                        show: false,
                        position: 'center',
                    },
                    labelLine: { show: false },
                    // 鼠标悬浮时显示
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold',
                        },
                    },
                },
            ],
        };
        myChart.setOption(option);
    });
</script>

<style lang="scss" scoped>

</style>
